<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello world</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<!-- vue监听的容器元素 -->
<div id="root"></div>

<script>

  // 事件绑定官方文档：https://vue3js.cn/docs/zh/guide/template-syntax.html#v-on-%E7%BC%A9%E5%86%99

  Vue.createApp({
    data() {
      return {
        event: 'click'
      }
    },
    methods: {
      handleClick() {
        console.log('hello')
      },
      one(event) {
        console.log('one')
      },
      two(event) {
        console.log('two')
      },
      submit() {
        console.log('按了回车才会提交')
      }
    },
    template: `
      <button v-on:click="handleClick">完整语法</button> <br />
      <button @click="handleClick">简写</button> <br />
      <button @[event]="handleClick">态参数的缩写 (2.6.0+)</button> <br />
      <button @click="one($event), two($event)">多事件处理</button> <br /><br />
      <input @keyup.enter="submit" placeholder="事件修饰符，按回车提交" />
    `
  }).mount('#root')

  // 使用 mount 绑定要监听的元素
</script>
</body>
</html>
